<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM操作</title>
    <script src="js/jquery-1.12.4.js"></script>
    <style type="text/css">
        .a {
            color: red;
        }

        .b {
            color: blue;
        }

        img {
            border: 5px lightgray solid;
            padding: 5px;
            margin: 5px;
        }
    </style>
</head>
<body>
    <input type="text" style="border: 1px red solid;" id="text">
    <p>这是一个段落1</p>
    <p>这是一个段落2</p>
    <p>这是一个段落3</p>
    <p>这是一个段落4</p>
    <ul id="u">
        <li>Mysql</li>
        <li>JDBC</li>
        <li>JQuery</li>
    </ul>


    <img src="img/8.jpg" height="300" width="260"/>

    <input type="button" value="点我">
</body>
<script>
    //当页面加载完成后执行此代码块
    $(function(){
        $("input[type=button]").click(function() {
            //获取 文本框和 段落标签中的文本
            // console.log("文本框中的数据:"+$("#text").val());
            // console.log("段落中的数据:"+$("p").text());
            // console.log("段落中的数据:"+$("p").html());
            //设置 文本框和段落标签中的文本
            // $("#text").val("abc");
            // $("p").text("<b>段落</b>"); //相当于 innerText
            // $("p").html("<b>段落</b>");//相当于 innerHTML
            //可获取 原始文本内容
            // $("p").text(function(i, originText){
            //     if(i %2 == 0){
            //         return "原始内容为：" + originText + "; 新内容为:索引是:" + i;
            //     }else{
            //         return "原始内容为：" + originText;
            //     }
            // })
            // let value = $("#text").val();
            // let li = document.createElement("li");
            // $(li).text(value);
            //添加 子元素
            // $("#u").append($(li));
            // $("#u").prepend($(li));
            //添加兄弟节点
            // $("li:last").after($(li));
            // $("li:first").before($(li));

            //移除 选择的元素
            // $("#text").remove();
            //移除无序列表
            // $("#u").remove();
            //移除第二个 li 子元素
            // $("li:eq(1)").remove()
            //删除列表的所有子元素
            // $("#u").empty();


            //获取样式
            // console.log($("#text").css("border"));
            //设置样式
            // $("#text").css("background-color", "red");
            // $("#text").css("color", "red");
            // $("#text").css("font-size", "25px");

            //添加class 样式
            // $("#text").addClass("b");
            //在 默认样式 和 指定的样式之间切换
            // $("#text").toggleClass("b");


            console.log($("img").width() + "::" + $("img").height());
            console.log($("img").innerWidth() + "::" + $("img").innerHeight());
            console.log($("img").outerWidth() + "::" + $("img").outerHeight());
        });

    });

</script>
</html>